<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>layui table</title>
		<link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
 <link rel="stylesheet" href="css/public.css" media="all">
 <script src="lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
 <script src="lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
		<style>
			html, body {
				background-color: #F1F1F1;
				margin: 0;
				padding: 0;
			}
		</style>
	</head>

	<body>
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card layui-form">
						<div class="layui-card-header">查询条件</div>
						<div class="layui-card-body layui-row layui-col-space15">
							<div class="layui-col-md2">
								<input type="text" class="layui-input" id="deviceNumber" placeholder="设备编号" />
							</div>
							<div class="layui-col-md2">
								<select name="" lay-verify="required" lay-search id="">
									<option value="">设备型号</option>
									<option value="">名称列表</option>
								</select>
							</div>
							<div class="layui-col-md12">
								<button type="button" class="layui-btn" data-type="reload">查询</button>
								<div class="layui-btn-group demoTable">
									<button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
									<button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
									<button class="layui-btn" data-type="isAll">验证是否全选</button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md12">
					<div class="layui-card layui-form">
						<div class="layui-card-header">查询结果</div>
						<div class="layui-card-body">
							<table class="layui-hide" id="layListId" lay-filter="layList"></table>

							<script type="text/html" id="barDemo">
								<button type="button" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="maintainRecord">保养记录</button>
								<button type="button" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="repairRecord">维修记录</button>

							</script>
						</div>
					</div>
				</div>
			</div>

		</div>
<script>
	layui.use('table', function() {
		var table = layui.table;
		table.render({
			elem: '#layListId',
			id: 'layTableId',
			url: 'api/test.json',
			title: '维修保养报',
			cellMinWidth: 100,
			cols: [
				[{
					type: 'checkbox',
					fixed: 'left'
				}, {
					type: 'numbers',
					fixed: 'left'
				}, {
					field: 'deviceNumber',
					title: '设备编号',
					minWidth: '120'
				}, {
					field: 'deviceName',
					title: '设备名称',
					minWidth: '120'
				}, {
					field: 'deviceType',
					title: '设备型号'
				}, {
					title: '操作',
					minWidth: '180',
					align: 'center',
					toolbar: '#barDemo'
				}]
			],
			page: true
		});
		//监听工具条
		table.on('tool(layList)', function(obj) {
			var data = obj.data; //获得当前行数据
			switch(obj.event) {
				case 'maintainRecord':
					maintainRecord();
					break;
				case 'repairRecord':
					repairRecord();
					break;
				default:
					break;
			}

		});
		var $ = layui.$,
			active = {
				reload: function() {
					var deviceNumber = $("#deviceNumber").val();

					//执行重载
					table.reload('layTableId', {
						page: {
							curr: 1
						},
						where: {
								'deviceNumber': deviceNumber								
						}
					});
				},
				getCheckData: function() { //获取选中数据
					var checkStatus = table.checkStatus('layTableId'),
						data = checkStatus.data;
					layer.alert(JSON.stringify(data));
				},
				getCheckLength: function() { //获取选中数目
					var checkStatus = table.checkStatus('layTableId'),
						data = checkStatus.data;
					layer.msg('选中了：' + data.length + ' 个');
				},
				isAll: function() { //验证是否全选
					var checkStatus = table.checkStatus('layTableId');
					layer.msg(checkStatus.isAll ? '全选' : '未全选')
				}

			};
		$('.layui-btn').on('click', function() {
			var type = $(this).data('type');
			active[type] && active[type].call(this);
		});

		function maintainRecord() {
			layer.msg("保养记录");
		};

		function repairRecord() {
			layer.msg("维修记录");

		};
	});
</script>
	</body>

</html>

